

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; font-size:14px}
#box{ width:500px; margin:100px auto}
table,th,td{ border:1px solid #000; border-collapse:collapse}
td,th{ width:100px; height:30px; padding:10px}
input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
tbody tr td:first-child{text-align: center;}
tfoot td{text-align: right;}
.editBtn{ color:#666}
.delBtn{ color:red}
.okBtn,.cancelBtn{ display:none}

.edit span{ display:none}
.edit input[type="text"]{ display:inline-block}
.edit .editBtn,.edit .delBtn{ display:none}
.edit .okBtn,.edit .cancelBtn{ display:inline}
</style>

</head>

<body>
<div id="box">
	<table>
		<thead>
			<tr>
	            <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
	            <th>名称</th>
	            <th>单价</th>
	            <th>数量</th>
	            <th>编辑</th>
	        </tr>
		</thead>
        <tbody>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>张三</span><input type="text"></td>
	            <td><span>18</span><input type="text"></td>
	            <td><span>1</span><input type="text"></td>
	            <td>
	            	<a href="javascript:;" class="editBtn">编辑</a>
	            	<a href="javascript:;" class="okBtn">确定</a>
	            	<a href="javascript:;" class="cancelBtn">取消</a>
	            	<a href="javascript:;" class="delBtn">删除</a>
	            </td>
	
	        </tr>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>李四</span><input type="text"></td>
	            <td><span>25</span><input type="text"></td>
	            <td><span>2</span><input type="text"></td>
	            <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
	
	        </tr>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>小强</span><input type="text"></td>
	            <td><span>22</span><input type="text"></td>
	            <td><span>3</span><input type="text"></td>
	            <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
	
	        </tr>
	        <tr>
	        	<td><input type="checkbox" class="check"/></td>
	            <td><span>小明</span><input type="text"></td>
	            <td><span>16</span><input type="text"></td>
	            <td><span>4</span><input type="text"></td>
	            <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
	
	        </tr>
        </tbody>
        <tfoot>
        	<tr>
        		<td colspan="5">总价：￥<b id="money"></b></td>
        	</tr>
        </tfoot>
   </table>
</div>

<script>
	var editBtns=document.querySelectorAll('.editBtn');
	var okBtns= document.querySelectorAll('.okBtn')
	var cancelBtn=document.querySelectorAll('.camcelBtn')
	var delBtn=document.querySelectorAll('.delBtn')
	var allCheck=document.querySelector('#allCheck')
	var check=document.querySelectorAll('.check')
	
	 var n=0
	 var money=document.querySelector('#money')
	 var sum=0
	 
	 function sun(){
		 sum=0;
		 Array.from(check).forEach((item)=>{
			 var tr=item.parentNode.parentNode
			 if(item.checked==true){
				 
			 sum +=tr.children[2].children[0].innerHTML*tr.children[3].children[0].innerHTML
				 
			 }
			 money.innerHTML=sum
			 console.log(sum)
		 })
	 }
	 
	 document.querySelector('thead').onclick=function (e){
		 e=e||event
		 var target=e.target||e.srcElement;
		if(target.id==='allCheck'){
			Array.from(check).forEach((item)=>{
				item.checked=allCheck.checked
			})
			sun()
			n=this.checked? check.length : 0;
		} 
		
	 }
  document.querySelector('tbody').onclick = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;
    var tr = target.parentNode.parentNode;
    switch (target.className) {
      case 'check':
      Array.from(check).forEach((item)=> {
		item.onchange=()=>{
			item.checked?n++:n--,
			allCheck.checked=n===check.length?true:false
			sun()
		}
        
        })
      break;
      case 'editBtn':
	  tr.classList.add('edit')
        var span = tr.querySelectorAll('span');
        Array.from(span).forEach((item,value)=> {
              item.nextElementSibling.value=item.innerHTML;
        })
		break;
      case 'cancelBtn':
        tr.classList.remove('edit');
      break;
	  case 'okBtn':
	  tr.classList.remove('edit')
	  var span=tr.querySelectorAll('span')
	  Array.from(span).forEach(function (item,index){
		  item.innerHTML=item.nextElementSibling.value;
	  })
	  sun()
	  break;
	  
      case 'delBtn':
        if (confirm('确定要删除吗？')) {
          tr.remove();
        }
		check=document.querySelectorAll('.check')
		if(tr.children[0].children[0].checked){
			n--
			sun()
		}
    }


  }
	
	
</script>
</body>
</html>
